<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>免费注册小马出行</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<script type="text/javascript" src="/public/fr_help/js/jquery.js"></script>
<script type="text/javascript" src="/public/fr_help/js/mui.min.js"></script>
<!--标准mui.css-->
<link rel="stylesheet" href="/public/fr_help/css/mui.min.css">
<!--App自定义的css-->
<link rel="stylesheet" type="text/css" href="/public/fr_help/css/app.css"/>
<style>
 .mui-toast-container {
	position: fixed;
	z-index: 9999;
	bottom: 0px;
	top:30%;
	width: 100%;
	-webkit-transition: opacity .8s;
	transition: opacity .8s;
	opacity: 0;
	
 }
.mui-toast-container.mui-active {
	opacity: 1
}
.mui-toast-message {
	font-size: 14px;
	width: 60%;
	margin: 5px auto;
	padding: 10px 5px;
	text-align: center;
	color: #fff;
	border-radius: 7px;
	background-color:rgba(0,0,0,0.5);
}
.loginBox .yzm .ad-yzm #btnSendCode.changebuton{
	background: -webkit-linear-gradient(bottom, #37ce36, #1caf1b); /* Safari 5.1 - 6.0 */
	background: -o-linear-gradient(bottom, #37ce36, #1caf1b); /* Opera 11.1 - 12.0 */
	background: -moz-linear-gradient(bottom, #37ce36, #1caf1b); /* Firefox 3.6 - 15 */
	background: linear-gradient(bottom, #37ce36, #1caf1b); /* 标准的语法 */
	border: none;
	opacity:1;
}
</style>
<script>
	+ function() {
		remLayout();

		function remLayout() {
			var w = document.documentElement.clientWidth;
			w = w > 768 ? 768 : w;
			w = w <= 320 ? 320 : w;
			document.documentElement.style.fontSize = w / 7.5 + 'px';
		}
		window.addEventListener('resize', function() {
			remLayout();
		}, false);
	}();
</script>
</head>
<body >
<!--<header class="mui-bar  mui-bar-nav" style="border-bottom:1px solid #e5e5e5;"><a id="back" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  <h1 id="title" class="mui-title">领取10元优惠券</h1>
</header>-->
<div class="mui-content zhuce_count" style="background:#fff;"> 
  <!--<div class="coupon_box coupon_box_noshadow">
	<div class="coupon_box_img"><img src="/public/fr_help/images/logo.png"></div>
	<div class="coupon_box_bot">
	  <div class="coupon_box_price"><small>￥</small>10</div>
	  <div class="coupon_box_text">
		<h3>顺风车优惠券</h3>
		<p>有效期：1个月</p>
	  </div>
	</div>
  </div>-->
  <div class="regtext_img"> <img src="/public/fr_help/images/regbg.png"></div>
  <div class="zhuce_box">
	<form class="loginBox">
	  <div class="">
	  	<if condition="$uid">
			<h3>推荐人ID:{$uid}</h3>
	  	</if>
		<input type="hidden" id="uid" name="uid" class="text" value="{$uid}">
	  </div>
	  <div class="tel">
		<input type="text" id="user_phone" class="text" placeholder="请输入手机号接受邀请">
	  </div>
	  <div class="tel" id="passDiv" style="display:none">
		<input type="password" id="user_pass" class="text" placeholder="请输入密码，8-16位字符（数字、字母、符号）" >
		<div class="tishi">*必须包含“数字、 字母、符号"其中的2种，不能包含手机号、空格。</div>
	  </div>
	  <div class="tel" id="passDiv2" style="display:none">
		<input type="password" id="user_pass2" class="text" placeholder="请再次确认密码" >
	  </div>
	  <div class="yzm">
		<input type="text" class="text yanzheng" id="code" placeholder="请输入验证码">
		<div class="ad-yzm">
		  <input id="btnSendCode" type="button" class="" value="获取验证码" onClick="sendMessage()" />
		</div>
	  </div>
	  <div>
		<button type="button" class="mui-btn mui-btn-block loginbut" id="submits" >确定</button>
	  </div>
	</form>
  </div>
</div>
<script>
	$('.index_ts .close').click(function(){
		$('.index_ts_cont').hide();
		$('.index_ts_bg').hide();
	});
</script> 
<script type="text/javascript">
	var InterValObj; //timer变量，控制时间
	var count = 60; //间隔函数，1秒执行
	var curCount;//当前剩余秒数
	var code = ""; //验证码
	var codeLength = 6;//验证码长度
	var password = '';
	var password2 = '';
	function sendMessage() {
		curCount = count;
		var dealType; //验证方式
		var uid=$("#uid").val();//用户uid
		//判断手机号码
		var user_phone = $("#user_phone").val();
		 if(!(/^1[23456789]\d{9}$/.test(user_phone))){ 
				// alert("手机号码有误，请重填");  
				mui.toast('手机号码有误，请重填',{ duration:'long', type:'div' });
				return false; 
		} 
		
		//产生验证码
		for (var i = 0; i < codeLength; i++) {
			code += parseInt(Math.random() * 9).toString();
		}
		//设置button效果，开始计时
			$("#btnSendCode").attr("disabled", "true");
			$("#btnSendCode").removeClass('changebuton');//按钮变灰色
			$("#btnSendCode").val( + curCount + "秒再获取");
			InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
		//向后台发送处理数据
		$.post("{:url('send_code')}",{'user_phone':user_phone},function(data){
			if(data.status == 1){
				mui.toast('验证码已发送',{ duration:'long', type:'div' });
				
			}
		},'json')
			
	}
	
	//输入正确的手机号，按钮变颜色
	$('#user_phone').bind('input propertychange',function() {
    var num = $(this).val();
    if(checktelphone(num))
	{
	    $("#btnSendCode").addClass('changebuton');//按钮变绿色
	}
	else{
		$("#btnSendCode").removeClass('changebuton');//按钮变灰色
		}
 	 });
  
	  function checktelphone(telphone) {
		if (!/^1[23456789]\d{9}$/.test(telphone)) {
			return false;
		}
		else { return true; }
	  }

	
	//timer处理函数
	function SetRemainTime() {
		if (curCount == 0) {                
			window.clearInterval(InterValObj);//停止计时器
			$("#btnSendCode").removeAttr("disabled");//启用按钮
			$("#btnSendCode").val("重新发送验证码");
			code = ""; //清除验证码。如果不清除，过时间后，输入收到的验证码依然有效    
		}
		else {
			curCount--;
			$("#btnSendCode").val( + curCount + "秒再获取");
		}
	}
	$(document).on('mouseleave', '#user_phone', function(){

		var user_phone = $("#user_phone").val();
		if(user_phone != ''){
			if(!(/^1[23456789]\d{9}$/.test(user_phone))){ 
				mui.toast('手机号码有误，请重填',{ duration:'long', type:'div' });
				return false; 
			} 
			$.post("{:url('is_exist')}",{'user_phone':user_phone},function(data){
				if(data.status == 1){
					//该用户已经存在
					$("#passDiv").hide();
					$("#passDiv2").hide();
				}else{
					//新用户
					$("#passDiv").show();
					$("#passDiv2").show();
				}
			},'json')
		}
	})
	$(document).on('click', '#submits', function(){
		var code = $("#code").val();
		var uid = $("#uid").val();
		var user_phone = $("#user_phone").val();
		    password = $("#user_pass").val();
		    password2 = $("#user_pass2").val();
		    if(password != password2){
		    	mui.toast('密码两次输入不相同!',{ duration:'long', type:'div' });
				return false; 
		    }
		
		$.post("{:url('send_submit')}",{'uid':uid,'user_phone':user_phone,'code':code,'password':password},function(data){
			if(data.status == 1){
				//mui.toast('验证码已发送'+data.data,{ duration:'long', type:'div' });
				alert('恭喜你,注册成功');
				location = data.data;
			}else{
				mui.toast(data.msg,{ duration:'long', type:'div' });
			}
		},'json')
	})
	$("#user_pass").focus(function(){
		  $("#passDiv .tishi").show();
	});
	$("#user_pass").blur(function(){
		  $("#passDiv .tishi").hide();
	});	
		
</script>
</body>
</html>
